//获取元素 创建实例对象
function Banner() {
	this.banner_img = banner_img;
	this.new_tex=new_text
	this.banner_box = document.querySelector('.banner_box');
	this.banner_list = document.querySelector('#banner_list');
	this.Slides = document.querySelectorAll('.banner_list li');
	this.prev_btn = document.querySelector('#prev_btn');
	this.next_btn = document.querySelector('#next_btn');
	this.new_Rendering=document.querySelector('.new_list_body_wrop_list')
	// console.log(banner_list)
	this.index = 0
	this.Rendering()
	this.bindEvent()
	this.aotuPlay()
	this.newRend()
}
//渲染图片
Banner.prototype.Rendering = function() {
	let = html = ''
	for (let i = 0; i < this.banner_img.length; i++) {
		html += `
		<li><a herf="javascirpt::"> <img src="${this.banner_img[i].img}"/></a></li>
		`
		// console.log(html)
	}
	this.banner_list.innerHTML = html

}
//渲染新闻栏
Banner.prototype.newRend=function(){
	
	// let div=document.createElement('div')
	let html=''
	for(let i=0;i<this.new_tex.length;i++){
		
		html +=`
				<div class="new_list_body_wrop">
					<div class="new_list_body_wrop_img">
						<a href="javascirpt::"><img src="${this.new_tex[i].img}" ></a>
					</div>
					<div class="new_list_body_wrop_text">
						<p class="new_list_body_wrop_title">${this.new_tex[i].title}</p>
						<p class="new_list_body_wrop_type">${this.new_tex[i].tipe}</p>
						<p class="new_list_body_wrop_item">
							<span class="iconfont icon-kanguo">${this.new_tex[i].Views}</span>
							<span class="iconfont icon-pinglun">${this.new_tex[i].comment}</span>
							<span class="iconfont icon-dianzan">${this.new_tex[i].good}</span>
						</p>
					</div>
					<div id="new_list_body_wrop_name">
						<span id="new_list_body_wrop_name_img"><a><img src="${this.new_tex[i].img2}"  alt></a></span> 
						<div id="new_body_time_text">
							<span class="new_list_body_wrop_name_text"><a href="">${this.new_tex[i].pre1}</a></span>
							<span class="new_list_body_wrop_name_time">${this.new_tex[i].time}</span>
						</div>
						
					</div>
					</div>
		`
	}
	
	this.new_Rendering.innerHTML=html
	
}

//绑定事件
Banner.prototype.bindEvent = function() {
	let self = this
	//定义最大索引
	let max_index = self.banner_img.length - 1
	self.prev_btn.onclick = function() {

		if (self.index === 0) {
			self.banner_list.style.left = -max_index * 1130 + "px"
			self.index = max_index - 1
		} else {
			self.index--
		}
		self.chageSlide()
	}

	self.next_btn.onclick = function() {
		// console.log(1)
		if (self.index === max_index) {

			self.banner_list.style.left = 0

			self.index = 1

		} else {
			self.index++
		}
		self.chageSlide()
	}

}
//轮播图切换图片
Banner.prototype.chageSlide = function() {
	$(banner_list)
		.stop()
		.animate({
			left: -this.index * 1130

		}, 1000)


}
//轮播图自动播放
Banner.prototype.aotuPlay = function() {
	var self = this
	let timer = setInterval(function() {
		self.next_btn.onclick()
	},3000)
	this.banner_box.onmouseover=function(){
		clearInterval(timer)
	}
	this.banner_box.onmouseout=function(){
		clearInterval(timer)
		 timer = setInterval(function() {
			self.next_btn.onclick()
		},3000)
	}
}

new Banner()


